angular ng-model双向绑定的自定义模板实现

发表于

angular ng-model双向绑定的自定义模板实现

流程：

  1. 定义模块

    1
    var myApp=angular.module('myApp',[]);

  2. 调用directive 自定义模板方法

    1
    2
    3
    4
    5
    6
    7
    myApp.directive('myModel',function () {
    	return {
    		link:function (scope,element,attrs) {
    		}
    	}
    })

  3. link内部实现，第一步拿到input的内容，因为element是jQ对象，

    1
    element.val()

  4. link内部实现，第二步拿到my-model对应的变量名

    1
    attrs['my-model']

  5. link内部实现，在scope上定义对象

    1
    scope[attrs['my-model']]=element.val();

  6. 强制刷新，实现数据双向绑定

    1
    scope.$apply();

完整实现代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>ng-model双向绑定的自定义模板实现</title>
</head>
<body>
<input type="text" my-model="value">{{value}}
<script src="angular.js"></script>
<script>
    var myApp=angular.module('myApp',[]);
    myApp.directive('myModel',function  () {
        return {
            link:function  (scope,element,attrs) {
                element.on('keyup',function  () {
                    scope[attrs['myModel']]=element.val();
                    scope.$apply();
                })
            }
        }
    })
</script>
</body>
</html>